<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		.resource{
			border-top:1px solid #F6FAFE;
			width: 99%;
			height: 500px;
			display: block;
		}
		.resource .item{
			width: 80px;
			min-height: 100px;
			background: url(img/icon-fold.png) center 10px no-repeat;
			float: left;
			border: 1px solid white;
			position: relative;
		}
		.resource .item input{
			position: absolute;
			bottom: 18px;
			width: 56px;
		}
		.resource .item:hover{
			background-color: #F5FBFF;
			border: 1px solid #D9F2FD;
			cursor: default;
			  box-sizing: content-box;
		}
		.resource .item p{
			margin-top: 60px;
			padding: 2px;
		}
		.resource .file{
			background: url(img/icon-file.png) 5px 5px no-repeat;
		}
		.resource-menu{
			height: 36px;
			line-height: 36px;
			background: #ECF2F7;
			border-bottom: 1px solid #D8E5F3;
		}
		.resource-menu .res-menu-bar a{
			float: left;
			text-decoration: none;
			font-size: 14px;
			color: #666666;
			margin-top:2px;
			height: 30px;
			line-height: 30px;
			padding: 0 6px;
			display: block;
			text-indent: 28px;
			border:1px solid #ECF2F7;
			cursor: default;
		}
		.resource-menu .res-menu-bar a:hover{
			background-color: #E6F3FC;
			border:1px solid #ABD6EA;
		}
		.resource-menu .res-menu-bar .rm-upload{
			background: url(img/icon-upload.png) 6px center no-repeat;
		}
		.resource-menu .res-menu-bar .rm-download{
			background: url(img/icon-download.png) 6px center no-repeat;
		}
		.resource-menu .res-menu-bar .rm-delete{
			background: url(img/icon-delete.png) 6px center no-repeat;
		}
		.resource-menu .res-menu-bar .rm-share{
			background: url(img/icon-share.png) 6px center no-repeat;
		}
		.resource-menu .res-menu-bar .rm-create{
			background: url(img/icon-create.png) 6px center no-repeat;
		}
		.resource-menu .res-menu-bar .rm-more{
			background: url(img/icon-more.png) 6px center no-repeat;
		}
		.resource-menu .res-menu-bar .disable{
			opacity: 0.4;
		}
		.resource-menu .res-menu-bar .disable:hover{
			border:1px solid #ECF2F7;
			background-color: #ECF2F7;
		}
		.resource-nav{
			height: 36px;
			line-height: 36px;
			border-bottom: 1px solid #EBEBEB;
		}
		.resource-nav .res-nav-bfr .r-back{
			margin-left: 10px;
			margin-top: 10px;
			float: left;
			display: block;
			width: 16px;
			height: 16px;
			background: url(img/icon-back.png) no-repeat;
		}
		.resource-nav .res-nav-bfr .r-forward{
			margin-left: 20px;
			margin-top: 10px;
			float: left;
			display: block;
			width: 16px;
			height: 16px;
			background: url(img/icon-forward.png) no-repeat;
		}
		.resource-nav .res-nav-bfr .r-refresh{
			margin-left: 20px;
			margin-top: 10px;
			float: left;
			display: block;
			width: 16px;
			height: 16px;
			background: url(img/icon-refresh.png) no-repeat;
		}
		.resource-nav .res-nav-list{
			float: left;
			margin-top:4px;
			margin-left: 10px;
			height: 26px;
			line-height: 22px;
			border: 1px solid #EBEBEB;
			padding: 2px 10px;
		}
		.resource-nav .res-nav-list a{
			float: left;
			text-decoration: none;
			font-size: 14px;
			color: #666666;
		}
		.resource-nav .res-nav-list a:hover{
			color: #88B0CE;
			text-decoration: underline;
		}
		.resource-nav .res-nav-list p{
			float: left;
			width: 10px;
			height: 20px;
			margin-left:6px;
			margin-right:6px;
			background: url(img/scrollbar.png)-94px no-repeat;
		}
		.resource-nav .res-nav-list .res-index{
			float: left;
			width: 20px;
			height: 20px;
			margin-left:6px;
			margin-right:6px;
			background: url(img/icon-index.png) center no-repeat;
		}
		#item_click {
			background-color:#E6F3FC;
			border:1px solid #ABD6EA;
		}
	</style>
	<script type="text/javascript">
		function file_db_click(){
			var $self = $(arguments[0]);
			if($self.hasClass('file')){
				
			}else{
				$('<p></p><a href="#">'+$self.find('p').text()+'</a>').appendTo($('.res-nav-list'));
				var list = [{'name':'234234',dir:false},{'name':'33',dir:false},{'name':'11',dir:true}]
				$(".resource").empty();
				for(var item in list){
					var obj = list[item];
					$('<li class="item'+(obj.dir?'':' file')+'"  ondblclick="file_db_click(this);" onclick="file_click(this);"><p>'+obj.name+'</p></li>').appendTo($(".resource"));
				}
			}
		}
		
		var is_file_click=false;
		function file_click(){
			is_file_click = true;
			var $self = $(arguments[0]);
			$self.parent().find('#item_click').removeAttr('id');
			$self.attr('id','item_click');
			$('.res-menu-bar').find('.disable').removeClass('disable');
		}
		function resource_click(){
			if(!is_file_click){
				var $self = $(arguments[0]);
				$self.find('#item_click').removeAttr('id');
				$('.res-menu-bar').find('a:eq(1),a:eq(2)').addClass('disable');
			}
			is_file_click = false;
		}
		function back_click(){
			var $self = $(arguments[0]);
			$('.res-nav-list').find('a:last,p:last').remove();
			var list = [{'name':'999',dir:false},{'name':'++',dir:true},{'name':'456454545',dir:true}]
			$(".resource").empty();
			for(var item in list){
				var obj = list[item];
				$('<li class="item'+(obj.dir?'':' file')+'"  ondblclick="file_db_click(this);" onclick="file_click(this);"><p>'+obj.name+'</p></li>').appendTo($(".resource"));
			}
		}
		function res_index_click(){
			var $self = $(arguments[0]);
			$('.res-nav-list a:eq(1)').nextAll().remove();
		}
		function res_menu_upload(){//上传
			
		}
		function res_menu_download(){//下载 
			
		}
		function res_menu_delete(){//删除
			$('.resource').find('#item_click').remove();
		}
		function res_menu_create(){//创建文件夹
			var obj = $('<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);"><input type="text" onblur="create_fold_blur(this);" value="新建文件夹" /></li>').appendTo($('.resource'));
			obj.find('input').text('新建文件夹').select();
		}
		function create_fold_blur(){//创建文件夹失去焦点
			var $self = $(arguments[0]);
			var value = $self.val();
			$('<p>'+value+'</p>').appendTo($self.parent());
			$self.remove();
		}
	</script>
	<body>
		<div class="resource-menu">
			<div class="res-menu-bar">
				<a href="#" title="上传" onclick="res_menu_upload(this);" class="rm-upload">上传</a>
				<a href="#" title="下载" onclick="res_menu_download(this);" class="rm-download disable">下载</a>
				<a href="#" title="删除" onclick="res_menu_delete(this);" class="rm-delete disable">删除</a>
				<a href="#" title="分享" class="rm-share">分享</a>
				<a href="#" title="新建文件夹" onclick="res_menu_create(this);" class="rm-create">新建文件夹</a>
				<a href="#" title="更多" onclick="res_menu_more(this);" class="rm-more">更多</a>
			</div>
		</div>
		<div class="resource-nav">
			<div class="res-nav-bfr">
				<a href="#" title="后退" onclick="back_click(this);" class="r-back"></a>
				<a href="#" title="前进" onclick="forward_click(this);" class="r-forward"></a>
				<a href="#" title="刷新" class="r-refresh"></a>
			</div>
			<div class="res-nav-list">
				<a href="#" onclick="res_index_click(this);" class="res-index"></a>
				<a href="#" onclick="res_index_click(this);">文件</a>
			</div>
		</div>
		<div class="resource" onclick="resource_click(this);" onselectstart="return false">
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀asdfasdf这是什么东西呀asdfasdf</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>2015-12-12</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item file" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
			<li class="item" ondblclick="file_db_click(this);" onclick="file_click(this);">
				<p>这是什么东西呀</p>
			</li>
		</div>
	</body>
</html>
